<template>
  <div class="window" @click="() => (showEmojiPicker = false)">
    <div class="container">
      <div class="title">
        <div class="text">{{ title }}</div>
      </div>
      <div class="name-input">
        <div @click.stop="handleShowEmojiPicker" class="emoji-select">
          <i v-if="!todoNavData.icon" class="ri-emoji-sticker-line"></i>
          <span v-else>{{ todoNavData.icon }}</span>
        </div>
        <input
          ref="inputRef"
          @blur="() => inputRef.focus()"
          placeholder="名称"
          autofocus
          type="text"
          v-model="todoNavData.name"
        />
        <div class="emoji-list" v-if="showEmojiPicker">
          <div class="emoji-group" v-for="group in emojiGroupList" :key="group.title">
            <div class="group-header">
              <div class="group-title">{{ group.title }}</div>
            </div>
            <div class="list">
              <div
                @click="handleEmojiClick(emoji)"
                class="list-item"
                v-for="emoji in group.emojiList"
                :key="emoji"
              >
                {{ emoji }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="errorMsg" class="error">{{ errorMsg }}</div>
      <div class="action">
        <div @click="handleCancel" class="cancel btn">
          <span class="text">取消</span>
        </div>
        <div
          @click="handleSave"
          :class="todoNavData.name.length > 0 ? 'save btn show' : 'save btn'"
        >
          <span class="text">保存</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { EMOJI_MAP } from '@renderer/const'
import { computed, onMounted, reactive, ref } from 'vue'

const inputRef = ref()

const showEmojiPicker = ref<boolean>(false)

const title = ref('添加清单')

const errorMsg = ref('')

const todoNavData = reactive({
  name: '',
  icon: '',
  id: ''
})

const handleSave = () => {
  if (todoNavData.name.trim().length === 0) {
    return
  }
  if (title.value === '编辑清单') {
    window.api.updateTodoNavData({
      ...todoNavData,
      path: '/list'
    })
  } else {
    window.api.addTodoNavData({
      ...todoNavData,
      path: '/list',
      id: Date.now().toString()
    })
  }
}

const handleCancel = () => {
  window.api.closeWindow('addTodoNav')
}

interface EmojiGroup {
  title: string
  emojiList: string[]
}

const emojiGroupList = computed(() => {
  const emojiGroupList: EmojiGroup[] = []
  for (const key in EMOJI_MAP) {
    emojiGroupList.push({
      title: key,
      emojiList: EMOJI_MAP[key][0].split(' ')
    })
  }
  return emojiGroupList
})

const handleShowEmojiPicker = () => {
  showEmojiPicker.value = !showEmojiPicker.value
}

const handleEmojiClick = (emoji: string) => {
  todoNavData.icon = emoji
  //   showEmojiPicker.value = false
}

onMounted(() => {
  inputRef.value.focus()
  window.api.getEditTodoNavData()
  window.electron.ipcRenderer.on('sendTodoNavData', (_e, data: TodoNavItem) => {
    if (data) {
      todoNavData.name = data.name
      todoNavData.icon = data.icon
      todoNavData.id = data.id
      title.value = '编辑清单'
    }
  })
  window.electron.ipcRenderer.on('error', (_e, msg: string) => {
    console.log(msg)
    errorMsg.value = msg
  })
})
</script>

<style scoped>
.window {
  width: 100%;
  height: 100%;
  background-color: var(--xz-card-bg);

  .container {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    position: relative;
    flex-direction: column;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;

      .text {
        font-weight: bold;
        font-size: 1.1rem;
      }
    }

    .name-input {
      width: 100%;
      position: relative;
      z-index: 1;

      input {
        color: var(--xz-fontcolor);
        width: 100%;
        border-radius: 4px;
        outline: none;
        border: none;
        height: 35px;
        text-indent: 2.2rem;
        font-size: 14px;
        line-height: 30px;
        background-color: var(--xz-secondbg);

        &:focus {
          border: 1px solid var(--xz-theme);
        }

        &::placeholder {
          color: rgb(217, 217, 217);
        }
      }

      .emoji-select {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.4rem;
        width: 24px;
        height: 24px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: var(--xz-theme);

          i {
            color: var(--xz-white);
          }
        }
      }

      .emoji-list {
        position: absolute;
        box-shadow: 0 0 12px 4px rgba(0, 0, 0, 0.15);
        height: 300px;
        width: 90vw;
        z-index: 100;
        background-color: var(--xz-card-bg);
        overflow: auto;
        display: flex;
        flex-direction: column;
        border-radius: var(--xz-main-radius);
        padding: 10px;

        .emoji-group {
          display: flex;
          flex-direction: column;

          .group-title {
            font-size: 0.8rem;
            color: var(--xz-fontcolor);
            margin-bottom: 5px;
            padding-left: 8px;
          }

          .list {
            display: flex;
            flex-wrap: wrap;

            .list-item {
              font-size: 1.3rem;
              border-radius: 4px;
              padding: 0px 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background-color 0.2s ease;

              &:hover {
                background-color: var(--xz-theme);
              }
            }
          }
        }
      }
    }

    .error {
      color: var(--xz-red);
      font-size: 0.7rem;
      margin-top: 5px;
      font-weight: bold;
    }

    .action {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;

      .btn {
        padding: 5px 30px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        cursor: pointer;

        .text {
          font-weight: 500;
          font-size: 0.8rem;
        }

        &.cancel {
          border: 1px solid var(--xz-theme);
          background-color: var(--xz-secondbg);
        }

        &.save {
          background: var(--xz-theme);
          color: var(--xz-white);
          opacity: 0.5;
        }

        &.show {
          opacity: 1;
        }
      }
    }
  }
}
</style>
